<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSV数据验证测试</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 20px; }
        .container { max-width: 1200px; margin: 0 auto; }
        .stats { background: #f5f5f5; padding: 15px; margin: 10px 0; border-radius: 5px; }
        .error { color: red; }
        .success { color: green; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        th, td { border: 1px solid #ddd; padding: 8px; text-align: left; }
        th { background-color: #f2f2f2; }
    </style>
</head>
<body>
    <div class="container">
        <h1>CSV数据验证测试</h1>
        
        <div class="stats">
            <h3>测试结果</h3>
            <div id="testResults">等待测试...</div>
        </div>

        <h2>原始数据预览</h2>
        <div id="rawData"></div>

        <h2>处理后数据</h2>
        <div id="processedData"></div>
    </div>

    <script>
        // 测试CSV加载
        async function testCSVLoader() {
            try {
                const response = await fetch('爬虫资料/51CTO.csv');
                const text = await response.text();
                
                document.getElementById('testResults').innerHTML = `
                    <p><strong>文件大小:</strong> ${(text.length / 1024).toFixed(2)} KB</p>
                    <p><strong>总行数:</strong> ${text.split('\n').length}</p>
                `;

                // 显示原始数据
                const lines = text.split('\n').slice(0, 10);
                document.getElementById('rawData').innerHTML = 
                    '<pre>' + lines.join('\n') + '\n...（仅显示前10行）</pre>';

                // 解析CSV
                const data = parseCSV(text);
                document.getElementById('testResults').innerHTML += `
                    <p><strong>解析后记录数:</strong> ${data.length}</p>
                    <p class="${data.length >= 180 ? 'success' : 'error'}">
                        ${data.length >= 180 ? '✅ 数据加载正常' : '❌ 数据加载异常'}
                    </p>
                `;

                // 显示处理后数据
                displayProcessedData(data);

            } catch (error) {
                document.getElementById('testResults').innerHTML = 
                    `<p class="error">错误: ${error.message}</p>`;
            }
        }

        function parseCSV(text) {
            text = text.replace(/^\uFEFF/, '');
            
            const lines = [];
            let currentLine = '';
            let inQuotes = false;
            
            for (let i = 0; i < text.length; i++) {
                const char = text[i];
                const nextChar = text[i + 1];
                
                if (char === '"') {
                    if (inQuotes && nextChar === '"') {
                        currentLine += '"';
                        i++;
                    } else {
                        inQuotes = !inQuotes;
                    }
                } else if (char === '\n' && !inQuotes) {
                    lines.push(currentLine);
                    currentLine = '';
                } else if (char === '\r' && !inQuotes) {
                    if (nextChar === '\n') {
                        lines.push(currentLine);
                        currentLine = '';
                        i++;
                    } else {
                        lines.push(currentLine);
                        currentLine = '';
                    }
                } else {
                    currentLine += char;
                }
            }
            
            if (currentLine.trim()) {
                lines.push(currentLine);
            }
            
            if (lines.length === 0) return [];
            
            const headers = parseCSVLine(lines[0]);
            const data = [];
            
            for (let i = 1; i < lines.length; i++) {
                const line = lines[i].trim();
                if (!line) continue;
                
                const values = parseCSVLine(line);
                
                if (values.length >= headers.length) {
                    const row = {};
                    headers.forEach((header, index) => {
                        row[header] = values[index] || '';
                    });
                    
                    if (row['web-scraper-order'] && row['web-scraper-order'].trim()) {
                        data.push(row);
                    }
                }
            }
            
            return data;
        }

        function parseCSVLine(line) {
            const values = [];
            let current = '';
            let inQuotes = false;
            
            for (let i = 0; i < line.length; i++) {
                const char = line[i];
                const nextChar = line[i + 1];
                
                if (char === '"') {
                    if (inQuotes && nextChar === '"') {
                        current += '"';
                        i++;
                    } else {
                        inQuotes = !inQuotes;
                    }
                } else if (char === ',' && !inQuotes) {
                    values.push(current.trim());
                    current = '';
                } else {
                    current += char;
                }
            }
            
            values.push(current.trim());
            return values;
        }

        function displayProcessedData(data) {
            let html = `<p>总记录数: ${data.length}</p>`;
            
            if (data.length > 0) {
                html += `
                    <table>
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>题目描述</th>
                                <th>回答情况</th>
                                <th>正确答案</th>
                            </tr>
                        </thead>
                        <tbody>
                `;
                
                data.slice(0, 10).forEach((row, index) => {
                    html += `
                        <tr>
                            <td>${index + 1}</td>
                            <td>${row['题目描述'] ? row['题目描述'].substring(0, 50) + '...' : '无题目'}</td>
                            <td>${row['回答情况'] || '未知'}</td>
                            <td>${row['正确答案'] || '未知'}</td>
                        </tr>
                    `;
                });
                
                html += `
                        </tbody>
                    </table>
                    <p>...（仅显示前10条记录）</p>
                `;
            }
            
            document.getElementById('processedData').innerHTML = html;
        }

        // 启动测试
        testCSVLoader();
    </script>
</body>
</html>